<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="html-box" v-if="datas.list">
      <div v-if="datas.list <= 0" style="font-weight: bold;font-size: 18px;line-height:50px;text-align: center">
          请添加订单列表

        <div class="order_all">
          <div class="order_pub">
            <i class="iconfont icon-stay_pay"></i>
            <span style="line-height: 16px">待付款</span>
          </div>
          <div class="order_pub">
            <i class="iconfont icon-stay_send"></i>
            <span style="line-height: 16px">待发货</span>
          </div>
          <div class="order_pub">
            <i class="iconfont icon-stay_receive"></i>
            <span style="line-height: 16px">待收货</span>
          </div>
          <div class="order_pub">
            <i class="iconfont icon-stay_refund"></i>
            <span style="line-height: 16px">售后列表</span>
          </div>
          <div class="order_pub">
            <i class="iconfont icon-all"></i>
            <span style="line-height: 16px">全部订单</span>
          </div>
        </div>
      </div>
      <div id="orderlist">

				<div class="ordertltie" v-if="datas.list.length == 1 && datas.show_tab">
					<div class="spare"></div>
					<div class="ordername">{{datas.list[0].name || datas.list[0].component}}</div>
					<div class="">
						<i class="iconfont icon-member_right"></i>
					</div>
				</div>

        <div class="nav nav-bgimage" v-if="datas.list.length > 1 && datas.show_tab">
          <div class="nav-li" :class="[item.active?'nav-selected':'']"
               v-for="(item, index) in datas.list" :key="index">
            <div class="nav-lis">
              {{item.name || item.component}}
            </div>
          </div>
        </div>

        <div class="order_all" v-for="(order, index) in datas.list" :key="index" v-show="order.active">
          <div class="order_pub" v-for="(item, i) in order.datas.list.value" :key="i">
            <img class="order_img" :src="item.image || emptyImage" alt="">
            <span>{{item.text}}</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
	import emptyImage from '@/resource/images/image.png';
// 自定义样式
const css = function() {
	if(this.datas.preview_color) {
		const {
			preview_color,
			text_color,
			tab_bg_color,
			tab_color,
			tab_active_color
		} = this.datas;

		return `
      .component-${this.id} .html-box {
          background-color: ${preview_color.color};
          background-image: url(${preview_color.isColor == 2? preview_color.image: ''});
          background-size: 100% 100%;
          background-position: center;
          background-repeat: no-repeat;
      }

      .component-${this.id} .order_all .order_pub{
          color: ${text_color};
      }

      .component-${this.id} .ordertltie {
          background-color: ${tab_bg_color};
      }

      .component-${this.id} .spare {
          background-color: ${tab_active_color};
      }

      .component-${this.id} .ordername {
          color: ${tab_color};
      }

      .component-${this.id}  .nav-bgimage{
          background-color: ${tab_bg_color};
          color: ${tab_color};
      }

      .component-${this.id}  .nav-bgimage .nav-selected{
          color: ${tab_active_color};
          border-bottom: 2px solid ${tab_active_color};
      }
  `;
  }
};

export default {
  props: ["id", "datas", "styles"],
  data() {
    return {
	    emptyImage
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 默认
.component-wrapper {
  width: 375px;
}

.html-box {
  min-height: 30px;
  /*background: #ffffff;*/
}
#orderlist {
  /*background: #ffffff;*/
}

.ordertltie {
  text-align: left;
  width: 100%;
  height: 40px;
  // border-bottom: 1px solid #ebebeb;
  box-sizing: border-box;
	position: relative;
	display: flex;
	padding: 0 14px;
	align-items: center;
  .spare {
    width: 4px;
    height: 16px;
    border-radius: 1px;
    /*background-color: #f15353;*/
    // margin-top: 12px;
    margin-right: 6px;
  }
  i {
    line-height: 40px;
    color: #c9c9c9;
    font-size: 20px;
    float: right;
    position: absolute;
		right: 14px;
		top: 0;
  }
  .ordername {
    float: left;
    line-height: 40px;
    font-size: 16px;
    /*color: #333;*/
    font-weight: bold;
  }
}
.order_all {
  padding: 10px 0;
  color: #333;
	display: flex;
	justify-content: space-around;
}

.order_img {
  width: 36px;
  height: 36px;
  display: block;
  margin: 0 auto;
}

.order_pub {
  display: flex;
  flex-direction: column;
  padding-top: 2px;
  text-align: center;
  position: relative;
  font-size: 12px;
  width: 25%;
  word-break: break-all;
  i {
    font-size: 24px;
    color: #999;
    margin: 0 auto;
  }
  .icon-stay_pay {
    background: url("../../../resource/images/myOrder_a.png") no-repeat center;
    background-size: 36px;
    width: 36px;
		height: 36px;
		display: block;
  }
  .icon-stay_pay:before {
    content: "";
  }
  .icon-stay_send {
    background: url("../../../resource/images/myOrder_b.png") no-repeat center;
    background-size: 36px;
    width: 36px;
		height: 36px;
		display: block;
  }
  .icon-stay_send:before {
    content: "";
  }
  .icon-stay_receive {
    background: url("../../../resource/images/myOrder_c.png") no-repeat center;
    background-size: 36px;
    width: 36px;
		height: 36px;
		display: block;
  }
  .icon-stay_receive:before {
    content: "";
  }
  .icon-stay_refund {
    background: url("../../../resource/images/myOrder_d.png") no-repeat center;
    background-size: 36px;
    width: 36px;
		height: 36px;
		display: block;
  }
  .icon-stay_refund:before {
    content: "";
  }
  .icon-all {
    background: url("../../../resource/images/all_order.png") no-repeat center;
    background-size: 36px;
    width: 36px;
    height: 36px;
    display: block;
  }
  .icon-all:before {
    content: "";
  }
}

.nav {
  display: flex;
  align-items: center;
  height: 40px;
  white-space: nowrap;
  flex-wrap: nowrap;
  box-sizing: content-box;
  .nav-li {
    flex: 1;
    min-width: 20%;
    text-align: center;
    .nav-lis {
      display: inline-block;
      line-height: 40px;
    }
  }
}
</style>
